<template>
    <div>
        <Modal title="信息修改" @on-visible-change="changeStatusHandle" width="400" v-model="isShowUpdInfoModal" @on-cancel="closeModal" @on-ok="confirmModal"  :mask-closable="false" :closable="false">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80">
                <FormItem label="用户名：" prop="username">
                    <Input disabled type="text" v-model="formInline.username" placeholder="请输入用户名..."/>
                </FormItem>
                <FormItem label="手机号：" prop="mobile">
                    <Input type="number" v-model="formInline.mobile" placeholder="请输入手机号..."/>
                </FormItem>
                <FormItem label="姓名：" prop="name">
                    <Input type="text" v-model="formInline.name" placeholder="请输入姓名..."/>
                </FormItem>
                <FormItem label="身份证号：" prop="idcardNo">
                    <Input type="text" v-model="formInline.idcardNo" placeholder="请输入证件号..."/>
                </FormItem>
            </Form>
            <div slot="footer" style="text-align: center">
                <Button @click="closeModal">取消</Button>
                <Button type="primary" @click="confirmModal('formInline')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="tsx">
import { Component, Prop } from "vue-property-decorator";
import MiXinModal  from '@/mixin/views/modal';
import { SYSUSER_UPDATE_INFO, INFO, SAVE } from "@/store/modules/crud/keys";

@Component
export default class TheUpdatedUserBaseInfo extends MiXinModal {
    @Prop(Boolean) isShowUpdInfoModal!: boolean;

    ruleInline = {
        username: [{ required: true, message: '用户名不能为空.', trigger: 'blur' }],
        mobile: [
            { required: true, message: "请输入手机号。", trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" }
        ],
        name: [{ required: true, message: '姓名不能为空.', trigger: 'blur' }],
        idcardNo: [
            { required: true, message: '证件号码不能为空.', trigger: 'blur' },
            { pattern: /^[1-9]\d{1}(.{13}|.{16})$/, message: "身份证格式不正确", trigger: "blur"}
        ],
    }
    get _name(){
        return SYSUSER_UPDATE_INFO;
    }
    get formInline(){
        return this.state.info;
    }
    closeModal(){
        this.$store.commit(INFO, {name: this._name, info: ''});
        this.$emit("close-info-modal");
    }
    confirmModal(formInline: any){
        (this.$refs[formInline] as any).validate(async (valid: any) => {
            if (valid) {
                const formData = {
                    id: this.formInline.id,
                    username: this.formInline.username,
                    mobile: this.formInline.mobile,
                    name: this.formInline.name,
                    idcardNo: this.formInline.idcardNo
                }
                this.$store.commit(INFO,{ name: this._name, info: formData });
                const promise = await this.$store.dispatch(SAVE,{name: this._name});
                if(promise.data==1){
                    this.$Message.success("修改成功!");
                    this.closeModal();
                    return ;
                }
                if(promise===undefined){
                    this.$Message.error("修改失败!");
                }
            }
        })
    }
    async changeStatusHandle(){
        if(this.isShowUpdInfoModal){
            const promise = await this.$store.dispatch(INFO,{name: SYSUSER_UPDATE_INFO, id: '0'});
            if(!promise){
                this.$Message.error("初始化数据失败!");
            }
        }
    }
}
</script>

<style scoped>

</style>
